import React from 'react';
import { Image, Stepper, Tag } from 'antd-mobile';
import { Medical } from '@/type/ConsultType';
import './Medicine.scss';
import { useNavigate } from 'react-router-dom';

interface MedicineProps {
  medical: Medical;
  changeQuantity: (id: string, quantity: number) => void;
}

const Medicine: React.FunctionComponent<MedicineProps> = ({ medical, changeQuantity: setQuantity }) => {
  const navigate = useNavigate();
  /**
   * @description 步进器组件值发生变化的回调函数
   * */
  const changeQuantity = (value: number) => {
    setQuantity(medical.id, value);
  };

  return (
    <div className="medicine-item">
      <Image className="img" alt="" src={medical.avatar} onClick={() => navigate(`/medicine-detail/${medical.id}`)} />
      <div className="info">
        <div className="name">
          <span className="ellipsis-single">{medical.name}</span>
          <Stepper min={0} value={Number(medical.quantity)} onChange={changeQuantity}></Stepper>
        </div>
        <div className="size">
          <Tag>{medical.prescriptionFlag === 1 ? '处方药' : '非处方药'}</Tag>
          <span>80ml</span>
        </div>
        <span className="message ellipsis-single">{medical.usageDosag}</span>
        <span className="message ellipsis-single">{medical.specs}</span>
        <p className="price">￥{medical.amount}</p>
      </div>
    </div>
  );
};

export default Medicine;